import { useDispatch } from 'react-redux';
import styles from './CardWeather.module.scss';
import { MdOutlineDelete } from 'react-icons/md';
import { deleteAccountById, getAccountAll } from '../../features/account/account';
import { Link, useNavigate } from 'react-router-dom';
import { ROUTES } from '../../utils/conts';
import { getCookie } from '../../utils';
import { deleteRegionTypesById, getRegionTypestAll } from '../../features/regionTypes/regionTypes';

const CardWeather = ({
  id,
  regionName,
  weatherCondition,
  temperature,
  humidity,
  windSpeed,
  precipitationAmount,
  measurementDateTime,
  weatherForecast,
}) => {
  const typeId = id;
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const handleClickDelete = () => {
    dispatch(deleteRegionTypesById(id)).then((res) => {
      if (res.payload?.status === 200) {
        dispatch(getRegionTypestAll());
      }
    });
  };

  const handleClickUpdate = () => {
    navigate(ROUTES.UPDATE_USER);
  };
  return (
    <div className={styles.card}>
      <div className={styles.wrapper}>
        <Link className={styles.update} to={`${ROUTES.UPDATE_TYPES_REGION}/${typeId}`}>
          Обновить
        </Link>
        <MdOutlineDelete onClick={handleClickDelete} className={styles.delete} />
      </div>
      <div>
        <p>{regionName}</p>
        <p>{weatherCondition}</p>
        <p>{temperature}</p>
        <p>{humidity}</p>
        <p>{windSpeed}</p>
        <p>{precipitationAmount}</p>
        <p>{measurementDateTime}</p>
        <p>{weatherForecast}</p>
      </div>
    </div>
  );
};

export default CardWeather;
